<template>
	<div class="btn-content no-drag">
		<!--    最小化-->
		<el-icon :size="20" @click="handleMin"><Minus /></el-icon>
		<!--    最大化-->
		<el-icon :size="20" @click="handleMax"><FullScreen /></el-icon>
		<!--    关闭-->
		<el-icon :size="20" @click="handleClose"><Close /></el-icon>
	</div>
</template>
<script setup lang="ts">
const { ipcRenderer } = require('electron')

const handleMin = () => {
	ipcRenderer.send('minWin')
}

const isFull = ref(false)
const handleMax = async () => {
	const el = document.documentElement

	if (!isFull.value) {
		el.requestFullscreen()
		isFull.value = true
	} else {
		document.exitFullscreen()
		isFull.value = false
	}
}
const handleClose = () => {
	ipcRenderer.send('close')
}
</script>

<style lang="scss" scoped>
.btn-content {
	height: 50px;
	position: fixed;
	top: 0;
	right: 0;
	box-sizing: border-box;
	padding: 0 5px;
	display: flex;
	justify-content: space-around;
	align-items: center;

	.el-icon {
		margin-left: 15px;
		cursor: pointer;
		&:last-child {
			margin-right: 10px;
		}
	}
}
</style>
